<template>
    <div class="login">
        <div class="login-box">
            <el-tabs v-model="activeName" >
                <el-tab-pane  name="pass">
                    <span slot="label"><i class="el-icon-user-solid"></i> 登录</span>
                    <LoginPass/>
                </el-tab-pane>
                <el-tab-pane  name="code">
                     <span slot="label"><i class="el-icon-question"></i>忘记密码</span>
                   <loginCode/>
                   
                  </el-tab-pane>
                <el-tab-pane  name="register">
                     <span slot="label"><i class="el-icon-edit-outline"></i> 注册</span>
                      <LoginRegist/> 
                </el-tab-pane>
                    
            </el-tabs>
        </div>
    </div>
</template> 


<script>
import {mymixins} from "@/utils"
import LoginPass from "@/components/loginpass.vue"
import LoginCode from "@/components/logincode.vue"
import LoginRegist from "@/components/loginregist.vue"

import{getcsrftoken} from "@/api"
export default {
    mixins:[mymixins],
    components:{
        LoginPass,
        LoginCode,
        LoginRegist
    },
    data(){
      return {
        activeName:"pass"
      }
    },
    mounted(){
        getcsrftoken()
        .then(res=>{
            
        })
    }
}
</script>






<style lang="scss" scoped>
::v-deep .el-tabs__nav{
    width:100%;
    display:flex;
}
::v-deep .el-tabs__item{
    flex:1;
    text-align:center;
}

.login{
    width:100%;
    height:100%;
    background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599110334043&di=4aad5d275b86b085fd64472b8b4f4bac&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F544b36fae2969.jpg) ;
    background-size: 120% 100%; 
    background-repeat: no-repeat;
    background-position: 0 0;
    overflow: hidden;
    position: relative;
    animation: move 20s linear infinite;
    -webkit-animation: move 20s linear infinite;
}

@keyframes move {
    0% {
        background-position: -100px 0; 
    }
    50%{
        background-position: 0 0;
    }
    100%{
        background-position: -100px 0; 
    }
}

.login-box{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:420px;
    height:360px;
    border:2px solid darkkhaki;
    background: rgb(180, 219, 217);
    border-radius:10px;
    animation: zoomInDown .8s;
}
</style>